<template>
  <div>
    <ul v-if="listData.length>0" class="list">
      <li v-for="(item, index) in listData" :key="index">
        <h3>
          <p v-html="item.achievement_name" @click="toDetail(item)"></p>
        </h3>
        <p v-html="item['achievement_profile']" class="cont"></p>
        <p class="other">
          <span v-show="item.achievement_institution!==''" :title="`第一完成单位：${item.achievement_institution}`">{{item.achievement_institution}}</span>
          <span v-show="item.contrib_full_name_short5!==''" :title="`成果完成人：${item.contrib_full_nameStr}`">{{item.contrib_full_name_short5}}</span>
          <span v-show="item.registered_date" :title="`注册日期：${item.registered_date}`">{{item.registered_date}}</span>
        </p>
      </li>
    </ul>
    <div v-else class="no-data">
      <loading1 :emptyText="emptyText"/>
    </div>
    <AchievementDialog ref="achievementDialog"/>
  </div>
</template>

<script>
import AchievementDialog from '@/views/modules/IR/child/SearchResult/AchievementDialog'
export default {
  props: {
    emptyText: {
      type: String
    }
  },
  components: {
    AchievementDialog
  },
  data() {
    return {
      listData: [],
    }
  },
  methods: {
    init(result) {
      result.forEach(v => {
        if (v.achievement_profile && v.achievement_profile !== '') {
          let lastStr = v.achievement_profile[v.achievement_profile.length-1]
          let reg = /[.|。|？]/g
          if (!reg.test(lastStr)) {
            v.achievement_profile += '...'
          }
        } else {
          v.achievement_profile = '暂无内容'
        }
        if (v.contrib_full_name && v.contrib_full_name.length > 0) { // 成果完成人
          v.contrib_full_nameStr = v.contrib_full_name.join(' | ')
        }
      })

      this.listData = result
    },
    toDetail(item) {
      item.id = item.esId
      this.$refs.achievementDialog.init(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  padding: 20px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
  li {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e7e6ec;
    &:last-of-type {
      margin-bottom: 0;
    }
    h3 {
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      font-weight: 600;
      font-size: 16px;
      color: #241c75;
      > p {
        position: relative;
        margin-right: 130px;
        color: #51505e;
        cursor: pointer;
      }
    }
    .cont {
      display: -webkit-box;
      max-height: 96px;
      line-height: 24px;
      margin: 10px 0;
      font-size: 14px;
      color: $color58;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;//控制行数
      overflow: hidden;
      ::v-deep {
        em {
          color: $color120;
        }
      }
    }
    .other {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding-top: 4px;
      span {
        position: relative;
        display: inline-block;
        line-height: 24px;
        padding: 0 6px;
        margin-right: 10px;
        font-size: 12px;
        &:nth-of-type(1) {
          color: $color66;
          background-color: $color67;
        }
        &:nth-of-type(2) {
          color: $color62;
          background-color: $color63;
        }
        &:nth-of-type(3) {
          color: $color64;
          background-color: $color65;
        }
      }
    }
  }
}
.align-center {
  text-align: center;
}
.no-data {
  line-height: 1.5rem;
  padding: 10px 20px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
}
</style>